<!-- 出库登记 -->
<template>
  <div>
    <cus-search style="min-width: 1200px;">
      <cus-search-item>
        <Form ref="formValidate" :model="form" :label-width="100">
          <FormItem label="单据日期" class="mr_48 mb_20">
            <DatePicker
              type="daterange"
              transfer
              ref="formDate"
              v-model="dateStr"
              format="yyyy-MM-dd"
              @on-change="sDateChange"
              placeholder="开始日期 - 结束日期"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="出库单号" class="mr_48 mb_20" prop="storageNo">
            <Input
              placeholder="请输入出库单号"
              clearable
              maxlength="20"
              v-model="form.storageNo"
            />
          </FormItem>
          <FormItem label="验收员" class="mr_48 mb_20" prop="checkName">
            <Input
              placeholder="请输入验收员"
              clearable
              maxlength="20"
              v-model="form.checkName"
            />
          </FormItem>
          <FormItem label="出库方式" class="mr_48 mb_20" prop="storageway">
            <Select v-model="form.storageway" clearable style="width: 200px">
              <Option
                v-for="item in outboundTree"
                :value="item.code"
                :key="item.code"
                >{{ item.desc }}</Option
              >
            </Select>
          </FormItem>
          <cusButton
            class="mr_20"
            type="primary"
            @onClick="
              pages.page = 1;
              postApiGoodsOutStockBillListApi();
            "
            >查询</cusButton
          >
          <cusButton class="mb_20" type="primary" @onClick="reset()"
            >重置</cusButton
          >
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-card class="cus_cardBox" :showTitle="false">
      <div class="btnBox">
        <cusButton
          class="mr_20"
          type="primary"
          @onClick="onOutboundReportShow()"
          >物资出库汇总表</cusButton
        >
        <Poptip placement="bottom">
          <cusButton type="primary">
            出库补录
            <Icon type="ios-arrow-down"></Icon>
          </cusButton>
        <div slot="content">
          <cusButton class="mb_10" type="primary" @click.native="onManualShow()"
            >手工出库</cusButton>
          <cusButton type="primary" class="mb_10"  @click.native="onReceiptStockShow()">领用单出库</cusButton>
          <cusButton type="primary" @click.native="onoutWarehouseWarrantShow()">入库单出库</cusButton>
        </div>
      </Poptip>
        <!-- <Dropdown class="dropDownItem" trigger="click">
          <cusButton type="primary">
            出库补录
            <Icon type="ios-arrow-down"></Icon>
          </cusButton>
          <template #list>
            <DropdownMenu>
              <DropdownItem @click.native="onManualShow()"
                >手工出库</DropdownItem
              >
              <DropdownItem divided @click.native="onReceiptStockShow()"
                >领用单出库</DropdownItem
              >
            </DropdownMenu>
          </template>
        </Dropdown> -->
      </div>
      <cusTable
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page']"
      >
        <template slot-scope="{ row }" slot="voucherOperation">
          <div class="flex">
            <cus-button
              type="text"
              v-if="row.voucher"
              size="small"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 5px"
              @onClick="onShowVoucher(row)"
            >
              <span>查看</span>
            </cus-button>
          </div>
        </template>
        <template slot-scope="{ row }" slot="imgOperation">
          <div style="display: flex; justify-content: center">
            <div
              @click="onShowImg(row)"
              v-if="row.coursePic"
              style="height: 40px; width: 80px"
            >
              <img
                :src="row.coursePic"
                alt=""
                style="height: 100%; width: 100%"
              />
            </div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 5px"
              @onClick="onShow(row)"
            >
              <Icon type="ios-search" size="4" style="margin: 2px 3px 0 0" />
              <span>查看</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 5px"
              @onClick="downTableExcel(row)"
            >
              <Icon
                type="ios-download-outline"
                size="4"
                style="margin: 2px 3px 0 0"
              />
              <span>导出</span>
            </cus-button>
            <!-- checkStatus 是否已确认 1时为确认  其他不确认
            checkFlag 是否允许确认 true允许确认 falseb不允许确认 -->
            <Poptip
							confirm
							:transfer="true"
							title="确认审核后，该单据将不在支持再次领用"
							@on-ok="onConfirm(row)"
							width="210"
						>
            <cus-button
              type="text"
              size="small"
              v-if="row.checkStatus == 1 && row.checkFlag"
              :style="{ color: '#FF9900' }"
              style="padding: 0 5px"
             
            >
              <Icon
                type="ios-checkbox-outline"
                size="4"
                style="margin: 2px 3px 0 0"
              />
              <span>确认</span>
            </cus-button>
            </Poptip>
          </div>
        </template>
      </cusTable>
      <div class="cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="postApiGoodsOutStockBillListApi"
        ></cus-page>
      </div>
    </cus-card>
    <!--手工出库-->
    <manualDelivery ref="manualDelivery"></manualDelivery>
    <!--领用单出库-->
    <receiptStock ref="receiptStock"></receiptStock>
    <!-- 入库单出库 -->
    <outWarehouseWarrant @update="onInit" ref="outWarehouseWarrant"></outWarehouseWarrant>
    <!--修改采购单采购量-->
    <Modal v-model="showModal" width="800" title="查看图片">
      <div>
        <img
          :src="coursePic"
          v-if="coursePic"
          alt=""
          style="height: 100%; width: 100%"
        />
        <div v-else style="text-align: center">暂无图片</div>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  postApiGoodsOutStockBillList,
  postApiGoodsGeneratePoStockbillIportExcel,
  postApiGoodsOuthandaworkCheckoutstockbill,
  getOutStorageWays
} from "@/api/business/manager";
import manualDelivery from "./components/manualDelivery.vue";
import receiptStock from "./components/receiptStock.vue";
import outWarehouseWarrant from './components/outWarehouseWarrant.vue'
import moment from "moment";
// require 方式
require("moment/locale/zh-cn");
moment.locale("zh-cn", {
  week: {
    dow: 1
  }
});
// import 方式
import "moment/locale/zh-cn";
moment.locale("zh-cn");

export default {
  components: { manualDelivery, receiptStock,outWarehouseWarrant },
  data() {
    return {
      form: {
        startDate: "", // 开始时间
        stopDate: "", // 结束时间
        storageNo: "", // 出库单号
        checkName: null, // 验收员
        storageway: null, // 出库方式
        checkStatus: "", // 状态
        loading: false
      },
      ruleValidate: {}, // rule验证
      dateStr: [], // 当周时间
      outboundTree: [], // 出库方式
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70
        },
        {
          title: "出库单号",
          key: "storageNo",
          minWidth: 105,
          align: "center"
        },
        {
          title: "单据日期",
          key: "billDate",
          minWidth: 125,
          align: "center"
        },
        {
          title: "出库方式",
          key: "storageWayDesc",
          minWidth: 125,
          align: "center"
        },
        {
          title: "状态",
          key: "checkStatus",
          minWidth: 95,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    background:
                      params.row.checkStatus == 1 ? "#ED4014" : "#19BE6B",
                    color: "#FFFFFF",
                    padding: "5px"
                  }
                },
                params.row.checkStatus == 0 ? "已确认" : "未确认"
              )
            ]); //0:已确认,1:未确认
          }
        },
        {
          title: "最新更新时间",
          key: "updateTime",
          minWidth: 135,
          align: "center"
        },
        {
          title: "凭证",
          slot: "voucherOperation",
          minWidth: 95,
          align: "center"
        },
        {
          title: "场景照片",
          slot: "imgOperation",
          minWidth: 105,
          align: "center"
        },
        {
          title: "操作",
          fixed: "right", // 右侧固定
          slot: "operation",
          align: "center",
          width: 175
        }
      ],
      data: [], // 表格列表
      coursePic: "", // 出库过程图片
      showModal: false, // 图片弹框

      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      }
    };
  },
  mounted() {
    this.getCurrentWeek();
    this.onInit();
  },
  methods: {
    onInit() {
      this.pages.page = 1;
      this.getOutStorageWaysApi();
      this.postApiGoodsOutStockBillListApi();
    },
    reset() {
      this.$refs.formDate.handleClear(); //清空时间
      this.$refs["formValidate"].resetFields();
      this.onInit();
    },
    // DatePicker事件(起止日期)
    sDateChange(date) {
      console.log(date);
      (this.form.startDate = date[0]), //开始日期
        (this.form.stopDate = date[1]); //结束日期
      this.onInit();
    },
    // 手工出库事件
    onManualShow() {
      this.$refs["manualDelivery"].show();
    },
    // 物资出库报表生成
    onOutboundReportShow() {
      this.$router.push({
        path: "/materialDeliverySummary/materialDeliverySummary"
      });
    },
    // 领用单出库
    onReceiptStockShow() {
      this.$refs["receiptStock"].show();
    },
    // 入库单出库
    onoutWarehouseWarrantShow() {
      this.$refs["outWarehouseWarrant"].show();
    },
    // 凭证
    onShowVoucher(row) {
      window.location.href = row.voucher;
    },
    // 查看
    onShow(row) {
      console.log('查看的数据',row);
      this.$router.push({
        path: "/outboundDetails/outboundDetails",
        query: {
          storageNo: row.storageNo, //采购单号
          checkByName: row.checkByName, //验收人
          billDate: row.billDate, //日期
          recipientDepartmentName: row.recipientDepartmentName, //领用单位
          id: row.id,
          type: row.storageway
        }
      });
    },
    onShowImg(row) {
      this.coursePic = row.coursePic;
      this.showModal = true;
    },
    // 导出Table列表采购单导出
    downTableExcel(row) {
      this.postApiGoodsGeneratePoStockbillIportExcelApi(row.id);
    },
    // 确认（审核）
    onConfirm(v) {
      this.postApiGoodsOuthandaworkCheckoutstockbillApi(v.id);
    },
    // 获取当前一周的时间
    getCurrentWeek() {
      let start = moment()
        .weekday(0)
        .format("YYYY-MM-DD"); //本周一
      let end = moment()
        .weekday(6)
        .format("YYYY-MM-DD"); //本周日
      this.dateStr[0] = start; //默认一周开始时间
      this.dateStr[1] = end; //默认一周结束时间
      this.form.startDate = start;
      this.form.stopDate = end;
      // 数组更新需要使用$set手动更新
      this.$set(this.dateStr,0,start)
      this.$set(this.dateStr,1,end)
    },
    // 出库登记列表数据----------------接口
    postApiGoodsOutStockBillListApi() {
      this.form.loading = true;
      return new Promise(resolve => {
        let params = {
          storageNo: this.form.storageNo, // 出库单号
          checkName: this.form.checkName, // 验收员
          startDate: this.form.startDate, // 开始时间
          stopDate: this.form.stopDate, // 结束时间
          storageway: this.form.storageway, //出库方式
          current: this.pages.page,
          size: this.pages.pageSize
        };
        postApiGoodsOutStockBillList(params).then(res => {
          this.form.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
          }
          resolve();
        });
      });
    },
    // 物资出库验收Table列表采购单导出--------------接口
    postApiGoodsGeneratePoStockbillIportExcelApi(id) {
      this.$cu.showLoading();
      return new Promise(resolve => {
        postApiGoodsGeneratePoStockbillIportExcel({ outStockId: id }).then(
          res => {
            if (res.retCode == 2000) {
              window.location.href = res.data;
              console.log(res);
              this.$cu.hideLoading();
              this.$Message.success(res.retMsg);
              resolve();
            } else {
              this.$cu.hideLoading(1);
            }
          }
        );
      });
    },
    // 物资出库清单确认（审核）-----------------------------接口
    postApiGoodsOuthandaworkCheckoutstockbillApi(id) {
      // this.$cu.showLoading();
      return new Promise(resolve => {
        postApiGoodsOuthandaworkCheckoutstockbill({ pooutstockid: id }).then(
          res => {
            if (res.retCode == 2000) {
              // this.$cu.hideLoading(1);
              this.$Message.success(res.retMsg);
              this.postApiGoodsOutStockBillListApi();
              resolve();
            } else if(res.retCode == 0) {
              this.$Message.error(res.retMsg);
            } 
          }
        );
      });
    },
    // 获取所有的出库方式--------------接口
    getOutStorageWaysApi() {
      return new Promise(resolve => {
        getOutStorageWays().then(res => {
          if (res.retCode == 2000) {
            this.outboundTree = res.data;
            console.log(res);
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.dropDownItem {
  .ivu-btn {
    height: 40px !important;
    font-size: 16px;
  }
}
</style>
